<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
			    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
	<title>别踩白块</title>
	<link rel="stylesheet" type="text/css" href="images/game.css"/>
	<script type="text/javascript" src="js/game.js" defer="defer"></script>
</head>
	<body>
	<div class="main">
		<!--开始界面-->
		<div id="start">
			<div id="blocks">
				<div class="contaner">
				<div class="block-1" ></div>
				</div>
			</div>
			<div  id="startContainer">
			<div class="logo"></div>
				<div class="userName" id="userNameText"><ul><li>请填写用户名：</li><input type="text" value="" name="userName" id="userName" /></ul></div>
				<div class="startButton">
					
					
					<div id="play">开始游戏</div>
				</div>
			</div>
		</div>
		<!--分数信息栏-->
		<div class="scro" id="scro">
			<div class="container">
			<div class="left">分数：<span id='score'>0</span></div>
			<div class="right">miss：<span id='life'>0</span></div>
			<div id="pause"  />暂停</div>
			</div>
		</div>
		<!--画布-->
		<canvas id="bg" width="100%" height="480"></canvas>
	
	</div>







































	
	<script src="js/jquery-1.7.2.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		$(function(){
			//获取最大可移动距离
			winWidth = $(document).width()>960?960:$(document).width();
			winWidth = winWidth<320?320:winWidth;
			for(i =0 ;i<150;i++){
				mtWidth = Math.ceil(Math.random() * (winWidth-50 - 50 ) + 50);
				mtHeight = Math.ceil(Math.random() * (480-50 - 50 ) + 50);
				color = ['#40F200','#000','#86C0F6','#18F218','#BFF800','#FFE500','#FE6C00','#3FF330E','#BE0DBF','#7D13F1','#4D25FF','#016ADF','#00A3A2'];
				mtColor = Math.floor(Math.random() * (color.length - 0 ) + 0);
				mtnum = Math.floor(Math.random() * (4 - 1 ) + 1);
				str = $('.block-1').clone().css({'left':mtWidth+'px','top':mtHeight+'px','background':color[mtColor],}).addClass('block-'+mtnum).removeClass('block-1');
				$('#blocks .contaner').append(str);			
			}
			 $('.block-1').remove();
		})
	</script>

	</body>
</html>